<template>
	<!-- 商品信息 -->
	<view>
		<view class="titlebox">
			<text class="text">商品信息</text>
			<image @click="chang()" class="img1" src="../../../static/paimg/修改.png" mode=""></image>
			<image @click="delect()" class="img2" src="../../../static/paimg/删除.png" mode=""></image>
		</view>
		<view class="imgbox">
			<text class="text">商品图片</text>
			<image class="image" :src="list.img"></image>
		</view>
		<view class="boxcent">
			<view class="box1">
				<text class="text">商品名称</text>
				<text class="text1">{{list.name}}</text>
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">商品编号</text>
				<text class="text1">{{list.id}}</text>
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">商品规格</text>
				<text class="text1">{{list.spe}}</text>
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">商品数量</text>
				<text class="text1">{{list.num}}</text>
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">商品单位</text>
				<text class="text1">{{list.unit}}</text>
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">所在仓库</text>
				<text class="text1">{{list.wid}}</text>
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">商品进价</text>
				<text class="text1">{{list.purchase_price}}</text>
			</view>
			<view class="br"></view>
			<view class="box1">
				<text class="text">商品售价</text>
				<text class="text1">{{list.retail_price}}</text>
			</view>
		</view>
		<view class="boxhead">
			<uni-collapse  ref="collapse">
				<uni-collapse-item  title="其他信息">
					<view class="box"> 
						<view class="box1">
							<text class="text">报警数量</text>
							<text class="text1">{{list.alarmnum}}</text>
						</view>
						<view class="br"></view>
						<view class="box1">
							<text class="text">生产日期</text>
							<text class="text1">{{list.production_date}}</text>
						</view>
						<view class="br"></view>
						<view class="box1">
							<text class="text">保质日期</text>
							<text class="text1">{{expiration}}</text>
						</view>
						<view class="br"></view>
						<view class="box1">
							<text class="text">供应商id</text>
							<text class="text1">{{list.supplier_id}}</text>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				list:[]
			}
		},
		onLoad: function (option) {
			this.id = option.id
			this.getdata();
		},
		computed:{
			expiration(){
				var expiration = this.list.expiration_date
				if(typeof(expiration) == 'string'){
					return this.list.expiration_date
				}else{
					return this.list.expiration_date
				}
			},
			whoutid(){
				var whout = this.list.whoutid
				if(typeof(whout) == 'number'){
					return this.list.whoutid
				} else {
					return "空"
				}
			}
		},
		methods: {
			async getdata(){
				const res = await this.Request({
					url:'api/stock/geadata',
					method:'POST',
					data:{id:this.id}
				})
				this.list = res.data[0]
			},
			async delect(){
				const res = await this.Request({
					url:'api/stock/delstockdata',
					method:'DELETE',
					data:{id:this.id}
				})
				if(res.data.affectedRows=1){
					uni.showToast({
						title: '删除成功'
					})
					setTimeout(() => {
						uni.reLaunch({
							url:'/pages/super/sup-commodity/sup-commodity'
						})
					},500)
				}
			},
			chang(){
				var item = JSON.stringify(this.list);
				uni.navigateTo({
					url:'/pages/public/stock/changepage?item=' + item
				})
			}
		}
	}
</script>

<style lang="scss">
	.titlebox{
		margin-top: 10px;
		width: 100%;
		height: 30px;
		background-color: #efefef;
		display: flex;
		border-bottom: 1px solid #ccc;
		image{
			margin: auto 0;
			height: 20px;
			width: 20px;
		}
		.text{
			margin: 5px 0 5px 5px;
			font-size: 110%;
			font-weight: 600;
			color: #008300;
		}
		.img1{
			margin-left: 240px;
		}
		.img2{
			margin-left: 10px;
		}
	}
	.imgbox{
		display: flex;
		height: 80px;
		margin-top: 10px;
		border-top: 2px solid #ccc;
		border-bottom: 2px solid #ccc;
		border-radius: 10px;
		.text{
			margin: auto 0;
			margin-left: 10%;
			font-weight: 600;
			font-size: 110%;
		}
		.image{
			margin: auto 0;
			margin-left: 100px;
			height: 60px;
			width: 60px;
		}
	}
	.boxcent{
		margin-top: 10px;
		border-top: 2px solid #ccc;
		border-bottom: 2px solid #ccc;
		border-radius: 10px;
		.br{
			height: 1px;
			margin-left: 10%;
			background: #a5a5a5;
		}
		.box1{
			margin-top: 10px;
			margin-bottom: 10px;
			.text{
				margin-left: 10%;
				font-weight: 600;
				font-size: 110%;
			}
			.text1{
				margin-left: 105px;
			}
		}
	}
	.boxhead{
		margin-top: 10px;
		.box{
			border-top: 2px solid #ccc;
			border-bottom: 2px solid #ccc;
			border-radius: 10px;
			.br{
				height: 1px;
				margin-left: 10%;
				background: #a5a5a5;
			}
			.box1{
				margin-top: 10px;
				margin-bottom: 10px;
				.text{
					margin-left: 10%;
					font-weight: 600;
					font-size: 110%;
				}
				.text1{
					margin-left: 105px;
				}
			}
		}
	}
</style>
